<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="UTF-8">
<title>发帖</title>
<link rel="icon" type="image/x-icon">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<body>
<!--样式资源-->
<div th:insert="base/style :: style"></div>
<!--样式资源-->

<!--nav导航-->
<div th:insert="base/nav :: nav"></div>
<!--nav导航-->

<!--hidden-->
<div th:insert="base/hidden :: hidden"></div>
<!--hidden-->
<!--内容部分-->
<div id="content"  style="padding-bottom: 30px">
    <div class="page-header">
        <div class="row">
            <div class="col-md-2">
                <h4 style="color: #363636;font-size: 20px;font-style: italic;margin-left: 20px">&nbsp;&nbsp;&nbsp;个人栏目<small></small></h4>
                <div class="col-md-4">
                    <ul style="margin-top: 10px;margin-left: 30px">
                        <li><a style="text-decoration: none;color: #464646" onclick="skip_to(PUBLISH_INDEX,'')" class="btn"><i class="icon-edit" style="color: grey"></i>&nbsp;我要发帖</a></li>
                        <li th:if="${session.id} != null"><a style="text-decoration: none;color: #464646" onclick="skip_to(COLLECTION_INDEX,'')" class="btn"><i class="icon-star" style="color: grey"></i>&nbsp;收藏/关注</a></li>
                        <li th:if="${session.id} != null"><a style="text-decoration: none;color: #464646" onclick="skip_to(REPO_INDEX,'')" class="btn"><i class="icon-cloud" style="color: grey"></i>&nbsp;个人帖库</a></li>
                    </ul>
                </div>
            </div>

            <div class="col-md-8" id="post_add">
                <h4 style="font-size: 20px;font-style: italic"><i class="icon-edit"></i>&nbsp;新增帖子<small></small></h4>
                <div class="col-md-12">
                    <div class="row" style="margin-top: 5px">
                        <div style="padding: 5px 0; color: #ccc">
                            <form class="form-inline">
                                <label for="title" style="color: black"><b>标题</b></label>
                                <input type="text" class="form-control" id="title"  placeholder="文章标题" style="width: 190px">
                                <span>create by <span th:text="${session.nickname}"></span></span>
                                <div style="margin-top: 3px"></div>
                                <label for="forum" style="color: black"><b>版块</b></label>
                                <select style="border-radius: 5px;width: 190px" id="forum" class="btn btn-default">
                                    <option class="btn btn-default" value="">请选择</option>
                                    <option v-for="item in forums" :value="item.id" class="btn btn-default">{{item.name}}</option>
                                </select>
                            </form>
                        </div>
                        <div id="editor">
                        </div>
                        <div id="hidden" style="display: none"></div>
                        <button id="btn1" type="button" class="btn btn-primary btn-xs" style="margin-top: 5px">发布</button>
                        <button id="btn2" type="button" class="btn btn-danger btn-xs" style="margin-top: 5px">清空</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--页脚-->
<div th:insert="base/footer :: footer"></div>
<!--页脚-->

<script src="http://123.207.19.115:8888/wangEditor/wangEditor.js"></script>
<script>
    let forum = new Vue({
        el:"#post_add",
        data:{
            forums:""
        },
        methods:{
            getForumList:function () {
                axios.get(FORUM_LIST,'')
                    .then(function (reponse) {
                        forum.forums = reponse.data.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        }
    });
    forum.getForumList();

    let E = window.wangEditor;
    let editor =  new E('#editor');
    editor.customConfig.uploadImgServer = UPLOAD_IMAGE;
    editor.customConfig.uploadFileName = 'file';
    editor.customConfig.debug = true;
    // 限制一次最多上传 1张图片
    editor.customConfig.uploadImgMaxLength = 1;
    editor.create();
    document.getElementById('btn1').addEventListener('click', function () {
        // 读取 html
        layui.use('layer', function() {
            //得到文章缩略图
            let im = '<div id="ims">'+editor.txt.html()+'</div>';
            let fid = $('#forum').val();
            let title = $('#title').val();
            $("#hidden").html(im);
            let href = $("#ims img:first").attr("src");
            if(isNaN(UID)) {
                layer.msg("请先登录!");
                setTimeout(' showLogin();', 2000)
            }else if(title === ""){
                layer.msg("标题必填!")
            }else if(fid === "") {
                layer.msg("版块必选!")
            }else if (href === undefined) {
                layer.msg("请在文本域内至少上传一张图片!")
            }else if(!forbiddenStr(editor.txt.text())){
                layer.msg("内容包含论坛限制敏感字符!!");
            } else {
                    let data = {
                        "title": $('#title').val(),
                        "content": editor.txt.html(),
                        "uid": UID,
                        "image": href,
                        "fid": fid
                    };
                    let result = post_add(data);
                    update_score('?score='+parseInt(get_config('发帖增分').data.configparameter)+'&id='+UID);
                    if (result.code === 0) {
                        layer.msg("成功!");
                        setTimeout(" location.reload()", 1000);
                    } else {
                        layer.msg("操作失败!");
                    }
                }
        });
    }, false);
    document.getElementById('btn2').addEventListener('click', function () {
        // 读取 html
        layui.use('layer', function() {
            layer.confirm('该操作会清空当前内容是否继续？', {
                btn: ['清除', '关闭']
            }, function(index, layero){
                //按钮【按钮一】的回调
                editor.txt.html("");
                layer.close(index);
            }, function(index){
                //按钮【按钮二】的回调
                layer.close(index);
            });

        });

    }, false)
</script>
</body>
</html>